<template>
  <div>
    <van-nav-bar title="校园通知" left-text="返回" left-arrow @click-left="() => $router.go(-1)" />
    <div>
      <img
        src="@/assets/notice_bg.jpg"
        width="100%"
        alt=""
      />
    </div>
    <div style="display: flex">
      <div class="siderBar">
        <van-sidebar v-model="activeKey" @change="noticeChange">
          <van-sidebar-item
            v-for="(item, index) in siderBar"
            :key="index"
            :title="item"
          />
        </van-sidebar>
      </div>
      <div class="content">
        <noticestrip
          v-for="item in noticeList[activeKey]"
          :title="item.title"
          :time="item.time"
          :key="item.noticeID"
          @click.native="handleDetail(item.noticeID)"
        ></noticestrip>
      </div>
    </div>
  </div>
</template>

<script>
import noticestrip from "@/components/noticeStrip/index.vue";
export default {
  components: {
    noticestrip,
  },
  data() {
    return {
      activeKey: 0,
      siderBar: ["学院通知", "学生通知", "教师通知", "学院骄傲"],
      noticeList: [],
    };
  },
  methods: {
    // 查看详情
    handleDetail(id) {
      this.$router.push({path:'/notice_detail',query:{noticeID:id}});
    },
    // 通知改变事件
    noticeChange(activeKey) {
      this.$axios.post(`/getNotice?type=${activeKey}`).then((res) => {
        this.$set(this.noticeList,activeKey,res.data)
      });
    },
  },
  created() {
    this.$axios.post(`/getNotice?type=0`).then((res) => {
      this.$set(this.noticeList,0,res.data)
    });
  },
};
</script>

<style scoped>
.siderBar {
  width: 22vw;
}
.content {
  float: left;
  width: 77vw;
}
</style>